import React, { Component, PropTypes } from 'react';
import Module from '../../lib/module';


class allCar extends Module{
    constructor(props, context) {
        super(props, context);
        this.state = {
            carStore:"工作车辆",
            car:"",
            cardata:["工作车辆","休息车辆","故障车辆"],
            workcar:["M-1号车","M-2号车","M-3号车","M-4号车","M-5号车","M-6号车","M-7号车","M-8号车","M-9号车",],
            restcar:["M-10号车","M-11号车","M-12号车","M-13号车","M-14号车","M-15号车","M-16号车","M-17号车","M-18号车",],
            breakcar:["M-19号车","M-20号车","M-21号车","M-22号车","M-23号车","M-24号车","M-25号车","M-26号车","M-27号车",],
        };
    }




    componentDidMount() {
    }

    componentWillUnmount() {
    }

    storeClick (val){
        this.setState({
            carStore: val
        })
    }
    carClick (val){
        this.setState({
            car: val
        }, ()=>{
            let text = this.state.car;
            this.props.carClick(text);
        });
    }
    render() {
        let { carStore,car } = this.state;
        let allcar;
        if(this.state.carStore=="工作车辆"){
            allcar = this.state.workcar;
        }else if(this.state.carStore=="休息车辆"){
            allcar = this.state.restcar;
        }else{
            allcar = this.state.breakcar;
        };
        return <div className="car-store">
            <span>全部车辆：</span>
            <ul>
                {
                    this.state.cardata.map((item,index)=>{
                        return <li className={carStore === item && "car-store-click"} key={index} onClick={()=>this.storeClick(item)}>{item}</li>
                    })
                    }
            </ul>
            <br/>
            <ul style={{margin:"8px 80px"}}>
                {
                    allcar.map((item,index)=>{
                        return <li className={car === item && "car-store-click"} key={index} onClick={()=>this.carClick(item)}>{item}</li>
                    })
                    }
            </ul>
        </div>
    }
}
export default allCar;